<template>
  <li class="tree-item">
    <div
      :class="{'tree-item__line': true, 'tree-item__bold': isFolder}"
      @click="toggle"
      @dblclick="changeType">
      {{ model.name }}
      <span v-if="isFolder">[{{ open ? '-' : '+' }}]</span>
    </div>
    <ul v-show="open" v-if="isFolder">
      <tree-item class="tree-item"
        v-for="(model, index) in model.children"
        :key="index"
        :model="model">
      </tree-item>
    </ul>
  </li>
</template>

<script>
export default {
  name: 'tree-item',
  props: {
    model: {
      type: Object,
      required: false,
      default: () => ({})
    }
  },
  components: {
  },
  computed: {
    isFolder: function () {
      return this.model.children && this.model.children.length
    }
  },
  data () {
    return {
      open: false
    }
  },
  mounted () {
  },
  methods: {
    toggle () {
      if (this.isFolder) {
        this.open = !this.open
      }
    },
    changeType () {
      if (!this.isFolder) {
        Vue.set(this.model, 'children', [])
        this.addChild()
        this.open = true
      }
    }
  }
}
</script>

<style lang="scss">
@import "~@/css/lib/mixin";
@import "~@/css/common/variables";

.tree-item {
  cursor: pointer;
  &__line {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  &__bold {
    font-weight: bold;
  }
}
</style>
